<script setup>
    import {reactive,onMounted,ref} from 'vue';
    // 导入接口
    import {getListRole,createRole,updateRole,deleteRole} from '../../../api/index'

    import { ElMessageBox } from 'element-plus';

    import router from '../../../router/index'
    const listQuery = reactive({
        pageNum: 1,
        pageSize: 10,
        keyword: null
    })

    const pageData = reactive({
        list: [],
        // 控制添加的模态框
        addFormDialogVisible: false,
        // 控制编辑的模态框
        editFormDialogVisible: false,
        // 添加角色的数据
        roleAdminAdd: {
            adminCount: 0,
            description: null,
            name: null,
            status: 1
        },
        // 编辑角色的数据
        roleAdminEdit: {
            adminCount: 0,
            description: null,
            name: null,
            status: 1,
            id: 1
        }
    })
    const total = ref(0)
    // 获取列表方法
    const getList = () => {
        getListRole(listQuery).then(res => {
            res.data.data.list.forEach(item => {
                item.status = Boolean(item.status)
            })
            pageData.list = res.data.data.list;
            total.value = res.data.data.total;
        })
    }

    // 生命周期 挂载后
    onMounted(() => {
        getList();
    });

    // 每页的个数发生改变时 
    const sizeChange = (e) => {
        console.log(e);
    }

    // 添加角色
    const addRole = () => {
        ElMessageBox.confirm('是否要确认', '提示', {
            "show-cancel-button": true,
            "show-confirm-button": true,
            cancelButtonText: '关闭',
            confirmButtonText: "确定",
            confirmButtonClass: 'confirmBtn',
            callback: function (res) {
                if (res == 'confirm') {
                    createRole(pageData.roleAdminAdd);
                }
            }
        })
    }

    // 编辑角色
    const editRole = (row) => {
        pageData.roleAdminEdit = JSON.parse(JSON.stringify(row));
        pageData.roleAdminEdit.status = Number(pageData.roleAdminEdit.status)
        pageData.editFormDialogVisible = true;
    }
    const editRoleConfirm = () => {
        ElMessageBox.confirm('是否确认修改呢?', '提示', {
            "show-cancel-button": true,
            "show-confirm-button": true,
            cancelButtonText: '关闭',
            confirmButtonText: "确定",
            confirmButtonClass: 'confirmBtn',
            callback: function (res) {
                if (res == 'confirm') {
                    updateRole(pageData.roleAdminEdit);
                }
            }
        })
    }

    // 删除角色
    const delRole = (id) => {
        ElMessageBox.confirm('是否确认删除呢?', '提示', {
            "show-cancel-button": true,
            "show-confirm-button": true,
            cancelButtonText: '关闭',
            confirmButtonText: "确定",
            confirmButtonClass: 'confirmBtn',
            callback: function (res) {
                if (res == 'confirm') {
                    let formData = new FormData();
                    formData.append('ids',id);
                    deleteRole(formData)
                }
            }
        })
    }

    // 定义跳转的方法
    const navTo = (url) => {
        router.push({
            path: url
        })
    }
</script>
<template>
    <div class="role">
        <el-card class="filter-container" shadow="never">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
                <el-button
                @click="getList"
                style="float:right" type="primary" size="small">
                    查询搜索
                </el-button>
                <el-button style="float:right;margin-right: 15px" size="small" @click="agin">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" size="small" label-width="140px">
                    <el-form-item label="输入搜索：">
                        <el-input class="input-width" v-model="listQuery.keyword" placeholder="角色名称" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
            <el-button class="btn-add" size="small" @click="pageData.addFormDialogVisible = true">
                添加
            </el-button>
        </el-card>
        <el-table :data="pageData.list" style="width: 100%" border>
            <el-table-column prop="id" label="编号" width="90" align="center" />
            <el-table-column prop="name" label="角色名称" width="150" align="center" />
            <el-table-column prop="description" label="描述" width="300" align="center" />
            <el-table-column prop="adminCount" label="用户户数" width="140" align="center" />
            <el-table-column label="添加时间" width="240" align="center">
                <template #default="scope">
                    <span>
                        {{ new Date(scope.row.createTime).toLocaleDateString() }}
                        {{ new Date(scope.row.createTime).toLocaleTimeString() }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="是否启用" width="200" align="center">
                <template #default="scope">
                    <div>
                        <el-switch v-model="scope.row.status" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <div>
                        <el-row justify="center">
                            <el-button size="small" type="text" @click="navTo('allocMenu/' + scope.row.id)">分配菜单</el-button>
                            <el-button size="small" type="text">分配资源</el-button>
                        </el-row>
                        <el-row justify="center">
                            <el-button size="small" type="text" @click="editRole(scope.row)">编辑</el-button>
                            <el-button size="small" type="text" @click="delRole(scope.row.id)">删除</el-button>
                        </el-row>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-pagination background v-model:current-page="listQuery.pageNum" v-modle:page-size="listQuery.pageSize"
                :page-sizes="[ 5,10, 15, 20]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                @size-change="sizeChange">
            </el-pagination>
        </el-row>
        <el-dialog v-model="pageData.addFormDialogVisible" title="添加角色" width="40%">
            <el-form :label-position="'right'" label-width="100px" :model="pageData.roleAdminAdd" style="max-width: 460px">
                <el-form-item label="角色名称:">
                    <el-input v-model="pageData.roleAdminAdd.name" />
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input v-model="pageData.roleAdminAdd.description" type="textarea" />
                </el-form-item>
                <el-form-item label="是否启用:">
                    <el-radio-group v-model="pageData.roleAdminAdd.status" class="ml-4">
                        <el-radio :label="1" size="large">是</el-radio>
                        <el-radio :label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="pageData.addFormDialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="addRole">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="pageData.editFormDialogVisible" title="添加角色" width="40%">
            <el-form :label-position="'right'" label-width="100px" :model="pageData.roleAdminEdit" style="max-width: 460px">
                <el-form-item label="角色名称:">
                    <el-input v-model="pageData.roleAdminEdit.name" />
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input v-model="pageData.roleAdminEdit.description" type="textarea" />
                </el-form-item>
                <el-form-item label="是否启用:">
                    <el-radio-group v-model="pageData.roleAdminEdit.status" class="ml-4">
                        <el-radio :label="1" size="large">是</el-radio>
                        <el-radio :label="0" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="pageData.editFormDialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="editRoleConfirm">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss">
.filter-container,
.operate-container {
    margin-bottom: 15px;
    position: relative;

    .btn-add {
        position: absolute;
        right: 15px;
    }
}

.confirmBtn {
    background-color: #ff0000 !important;
}
</style>